<template>
  <div ref="ele" class="title_container">
    <div class="row">
      <span v-if="question.requiredFlag" class="require_flag">*</span>
      <span class="index">{{ index + 1 }}/{{ total }}、</span>
      <span class="name">{{ question.questionName }}</span>
      <span v-for="(tag,index) in question.questionTag" :key="index" class="tag">
        【{{ tag }}】
      </span>
    </div>
    <div v-if="question.questionDesc" class="desc">
      {{ question.questionDesc }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionTitle',
  props: {
    index: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 0
    },
    question: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.title_container {
    span{
        font-size: 16px;
        color: #333;
        font-weight: 500;
    }
    input {
        box-sizing: border-box;
        padding: 14px 19px;
        width: 100%;
        height: 42px;
        border: 1px solid #999;
        font-size: 14px;
    }
    .content{
        margin-top: 17px;
        margin-bottom: 43px;
        .item{
          margin-bottom: 14px;
        }
        .item_input {
          margin-top: 14px;
        }
    }
    .require_flag{
        font-size: 16px;
        color: #E41A1A;
    }
    .name{
        margin-right: 6px;
    }
    .tag{
        color: #999;
        margin-left: -10px;
    }
    .desc{
      color: #999;
      font-weight: 400;
      font-size: 12px;
      margin-top: 12px;
      line-height: 22px;

    }
}

</style>
